<template>
  <el-form ref="formRef" :inline="true" :model="form" class="list-search">
    <el-button type="primary" @click="edit">新增</el-button>
    <el-button type="danger" @click="batchRemove">批量删除</el-button>
    <div class="space"></div>
    <el-form-item label="姓名">
      <el-input v-model="form.name" placeholder="输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="form.status" placeholder="选择状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button @click="formRef.resetFields()">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table highlight-current-row v-loading="loading" :data="list" @selection-change="multipleSelectionChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column prop="website" label="主页"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
    <el-table-column prop="status" label="状态" width="80">
      <template #default="scope">
        <el-switch
            v-model="scope.row.status"
            :active-value.number="1"
            :inactive-value.number="2"
            @change="changeStatus(scope.row)"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
        <el-button type="text" @click="remove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      :page-sizes="[20, 50, 100, 500]"
      v-model:pageSize="form.pageSize"
      v-model:currentPage="form.pageNo"
      layout="total, sizes, pager"
      :total="total">
  </el-pagination>

  <el-dialog width="550px" :title="dialogFormTitle" v-model="dialogFormVisible">
    <DemoForm :id="dialogFormId" @close="dialogFormVisible = false" v-if="dialogFormVisible"></DemoForm>
  </el-dialog>
</template>

<script>
import {reactive, watch, toRefs, onMounted, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import DemoForm from './form.vue'
import useBasePage from "../../composables/useBasePage"

export default {
  components: {DemoForm},
  setup() {
    const {baseState, request, confirm, toast} = useBasePage()
    const state = reactive({
      ...toRefs(baseState),
      form: {
        name: null,
        status: null,
        pageNo: 1,
        pageSize: 20,
      },
      list: null,
      total: 0,
      dialogFormId: null,
      dialogFormTitle: '',
      dialogFormVisible: false,
      multipleSelection: null,
    })

    const refresh = async () => {
      const result = await request('/api/users', {data: state.form})
      state.list = result.data.list
      state.total = result.data.total
    }

    const fetchList = async () => {
      const result = await request('/api/users', {data: state.form})
      state.list = result.data.list
      state.total = result.data.total
    }
    watch(() => [state.form.pageNo, state.form.pageSize], () => fetchList())
    onMounted(fetchList)

    const search = () => {
      state.pageNo = 1
      fetchList()
    }
    const changeStatus = async (row) => {
      const result = await request('/api/status', {id: row.id})
      if (!result.success)
        return
      ElMessage.success('操作成功')
    }
    const edit = (row) => {
      state.dialogFormTitle = row ? '编辑' : '新增'
      state.dialogFormId = row ? row.id : null
      state.dialogFormVisible = true
    }
    const remove = async () => {
      const result = await confirm('此操作将永久删除该记录, 是否继续?')
      if (!result)
        return
      ElMessage.success('删除成功')
      await fetchList()
    }
    const batchRemove = async () => {
      if (state.multipleSelection == null) {
        ElMessage.warning('请勾选要删除的记录')
        return
      }
      const result = await confirm('确定删除选中的记录？')
      if (!result)
        return
      ElMessage.success('删除成功')
      await fetchList()
    }
    const multipleSelectionChange = (value) => {
      const idList = value.map(v => v.id)
      state.multipleSelection = idList.length > 0 ? idList.join(',') : null
    }

    const formRef = ref(null)
    return {
      ...toRefs(state),
      formRef,
      search,
      changeStatus,
      edit,
      remove,
      batchRemove,
      multipleSelectionChange,
    }
  },
}
</script>

<style scoped>

</style>
